<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
  <title>JAvaScript Excel</title>
</head>
<body>

<div id="app" class="container">
  <div class="excel">

    <div class="excel__header">
      <input class="excel__header-input input" type="text" value="Новая таблица"/>
      <div class="excel__header-buttons">
        <div class="excel__header-button button">
          <span class="material-icons">
            delete
          </span>
        </div>
        <div class="excel__header-button button">
          <span class="material-icons">
            exit_to_app
          </span>
        </div>
      </div>
    </div>

    <div class="excel__toolbar">
      <div class="excel__toolbar-button button">
          <span class="material-icons">
            format_bold
          </span>
      </div>
      <div class="excel__toolbar-button button">
          <span class="material-icons">
            format_italic
          </span>
      </div>
      <div class="excel__toolbar-button button">
          <span class="material-icons">
            format_underlined
          </span>
      </div>
      <div class="excel__toolbar-button button">
          <span class="material-icons">
            format_align_left
          </span>
      </div>
      <div class="excel__toolbar-button button">
          <span class="material-icons">
            format_align_center
          </span>
      </div>
      <div class="excel__toolbar-button button">
          <span class="material-icons">
            format_align_right
          </span>
      </div>
    </div>

    <div class="excel__formula">
      <div class="excel__formula-info">fx</div>
      <div class="excel__formula-input" contenteditable spellcheck="false"></div>
    </div>

    <div class="excel__table">
      <div class="row">
        <div class="row-info"></div>
        <div class="row-data">
          <div class="column">A</div>
          <div class="column">B</div>
          <div class="column">C</div>
        </div>
      </div>

      <div class="row">
        <div class="row-info">1</div>
        <div class="row-data">
          <div class="cell selected" contenteditable>A1</div>
          <div class="cell" contenteditable>B1</div>
          <div class="cell" contenteditable>C1</div>
        </div>
      </div>

      <div class="row">
        <div class="row-info">2</div>
        <div class="row-data">
          <div class="cell" contenteditable>A2</div>
          <div class="cell" contenteditable>B2</div>
          <div class="cell" contenteditable>C2</div>
        </div>
      </div>
    </div>

  </div>
</div>

</body>
</html>
